<template>
	<view class="my_container">
		<!-- 头部 -->
		<view class="my_top"  v-if="avatarUrl == ''" >
			<view style="display: flex;align-items: center;">
				<view class="my_top_img">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="my_top_name">
					<text>未登录</text>
				</view>
			</view>
			<view>
				<button @click="clickLogin" style="background-color: #2b3278;color: #FFFFFF;width:100px;font-size: 14px;border: 2px solid #FFFFFF;border-radius: 20px;">
					点击登录
				</button>
			</view>
		</view>
		<view class="my_top" v-else>
			<view style="display: flex;align-items: center;">
				<view class="my_top_img">
					<image :src="avatarUrl" mode=""></image>
				</view>
				<view class="my_top_name">
					<text>{{nickName}}</text>
				</view>
			</view>
		</view>
		<!-- 导航 -->
		<view class="my_nav">
			<view class="my_nav_img" v-for="v in navimg":key="v.name">
				<image :src="'../../static/'+v.url" mode=""></image>
				<text>{{v.name}}</text>
			</view>
		</view>
		<!-- 内容 -->
		<!-- 菜单栏 -->
		<view class="Items">
			<view v-for="item in menus" :key="item.text">
					<!-- 循环一个菜单 -->
					<view v-if="item.icon" class="my-menu-item">
						<view class="my-menu-left">
							<image :src="'../../static/' + item.icon"></image>
							<text>{{item.text}}</text>
						</view>
						<view class="my-menu-right">
							>
						</view>
					</view>
					<!-- 循环一个空栏 -->
					<view v-else class="my-menu-space"></view>
				</view>

		</view>
				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatarUrl:'',//用户头像
				nickName:'',//用户名字
			// 导航图片
			navimg:[
				{name:"我的咨询",url:'yinanzixun.png'},
				{name:"我的资料",url:'资料.png'},
				{name:"关注楼盘",url:'w_爱心.png'},
				{name:"消息通知",url:'消息.png'}
			],
			menus: [{
									icon: 'my_1.png',
									text: '我的积分'
								},
								{
										icon: 'my_2.png',
									text: '我的订阅'
								},
								{
									icon: 'my_3.png',
									text: '房贷计算器'
								},
								{},
								{
									icon: 'my_4.png',
									text: '浏览记录'
								},
								{
									icon: 'my_5.png',
									text: '微聊客服'
								},
								{},
								{
									icon: 'my_6.png',
									text: '我的问答'
								},
								{
									icon: 'my_7.png',
									text: '设置'
								},
							
								
							] //菜单数组
			}
		},
		methods: {
					clickLogin() {
						let _this = this
						//弹窗并获取用户数据
						uni.getUserProfile({
							desc: '获取您的信息,登录',
							success(obj) {
								//console.log(obj)
								_this.nickName = obj.userInfo.nickName
								_this.avatarUrl = obj.userInfo.avatarUrl
							}
						})
					}
				}
				
	}
</script>

<style lang="scss">
	$bg: #F4F3F8;
	.my_container {
		height: 100%;
		background-color: #f4f3f8;
		position: relative;
		.my_top {
			background-color: #303c80;
			height: 200rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 10px;
			justify-content: space-between;

			.my_top_img {
				width: 110rpx;
				height: 110rpx;
				border: 2px solid white;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 110rpx;
					height: 110rpx;
				}
			}

			.my_top_name {
				margin-left: 15px;
			}
		}
		.my_nav{
			height:160rpx;
			width: 90%;
			background-color: #FFFFFF;
			border-radius: 10px;
			position: absolute;
			top:180rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			.my_nav_img{
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				image{
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 5px;
				}
			}
			
		}
		.Items{
			margin-top: 80px;
		}
		.my-menu-space {
					height: 6px;
				}
		.my-menu-item {
				border-radius: 3px;
			image{
				margin-right: 5px;
			}
					display: flex;
					background-color: #fff;
					margin: 0 20rpx;
					padding: 10px 15px;
					justify-content: space-between;
					border-bottom: 1px solid $bg;
					align-items: center;
		
					.my-menu-left {
						display: flex;
						align-items: center;
		
						image {
							width: 25px;
							height: 25px;
						}
					}
				}
		
	}
</style>
